<template>
  <div class="login-page">
    <el-card class="box-card">
    <template #header>
    <h3 class="title">黑马面经运营后台</h3>
    </template>
    <!--表单校验的三要素:
    1.el-form上的model属性,表示校验的数据,必须要校验的数据,必须是对象,:model不是v-model
    2.el=from上的rules属性,表示校验的规则是什么
    3.el-form-item上的pro属性,表示校验项的名字,强烈建议和数据名一样 -->

    <!-- 用户名 -->
    <el-form ref="form" :model="form" :rules="rules">
     <el-form-item prop="username" label="用户名">
    <el-input placeholder="输入用户名" v-model="form.username"></el-input>
     </el-form-item>
     <!-- 密码 -->
     <el-form-item prop="password" label="密码">
    <el-input placeholder="输入用户密码" v-model="form.password"></el-input>
     </el-form-item>

     <!-- 登录和重置 -->
     <el-form-item class="btn">
     <el-button type="primary" @click="hlogin">登录</el-button>
    <el-button @click="hReset">重置</el-button>
  </el-form-item>
    </el-form>
    </el-card>
  </div>
</template>

<script>
import { login } from '@/api/user'
export default {
  name: 'LoginIndex',
  data () {
    return {
      form: {
        username: 'admin8',
        password: 'admin'
      },
      rules: {
        username: [
          // 校验项的名字:数组,里面可以装多个校验规则
          // required:必填项
          // message:提示信息
          // trigger:触发时机
          { required: true, message: '请输入用户名', trigger: 'blur' },
          // min最小位数 max最大位数
          { min: 5, max: 11, message: '用户名必须是6~11位', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          // pattern:用于写正则表达式
          // \d: digit数字
          // \w: word 字符
          { pattern: /^\w{5,11}$/, message: '密码必须是6~11位', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    hlogin () {
      // 兜底校验，表单预校验
      // 获取DOM元素可以操作DOM
      // 获取组件对象可以调用他的方法，访问它的属性
      this.$refs.form.validate(async valid => {
        // 这个函数会在校验通过后自动执行
        // console.log(valid)
        // 趁早返回
        if (!valid) return
        // 发请求登录=>封装api=>调用api=>获取token=>vuex=>存到本地
        console.log('我要发请求')
        // this.$store.dispatch('user/getToken', this.form)
        const { data } = await login(this.form)
        this.$store.commit('user/updateToken', data.token)
        // 跳转到首页
        this.$router.push('/')
        // 提醒用户
        this.$message.success('登录成功')
      })
    },
    hReset () {
      // fields字段
      // 重置表单
      this.$refs.from.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('@/assets/login-bg.svg') no-repeat center;
  background-size: 100%;

    .el-card{
      width: 420px;
      ::v-deep .el-card__header{
        background-color: #727cf5;
         height: 80px;
         display: flex;
         align-items: center;
         justify-content: center;
      }
      .title{
        color: white;
        margin: 0;
        font-weight: 400;
      }
    }
.el-form{
  padding: 0 20px;
  .btn{
    display: flex;
    justify-content: center;
  }
}
}
</style>
